<template>
  <my-navigation-bar :my-style="style">功能</my-navigation-bar>
  <text class="icon-zuojiantou navbar" @tap="goBack" :style="flag?{marginTop: '38rpx'}:''"></text>
  <view v-if="flag">
    <view class="container" :style="flag?{marginTop: '180rpx'}:''">
      <view class="slider-box" v-if="typeId == 1">
        <slider value="50" @change="volumeChange" show-value class="slider" activeColor="#0B58F4" :value="volume" />
      </view>
    </view>
  </view>
  <view :style="{transform: state.coverTransform, transition: state.coverTransition}" @touchmove="moveH" @touchstart="startH" @touchend="endH" v-else>
    <scroll-view scroll-y="true" class="scroll-box">
      <view class="container" :style="flag?{marginTop: '180rpx'}:''">
        <view class="slider-box" v-if="typeId == 1">
          <slider value="50" @change="volumeChange" show-value class="slider" activeColor="#0B58F4" :value="volume" />
        </view>
      </view>
    </scroll-view>
  </view>

</template>

<script setup>
  import myNavigationBarVue from '../../components/my-navigation-bar/my-navigation-bar.vue';
  import {
    computed,
    onBeforeMount,
    ref
  } from "vue";
  import useBounceFunc from "../../hooks/bounce.js";
   const {state, moveH, startH, endH} = useBounceFunc();
  const style = {
    textAlign: 'left',
    paddingLeft: '15%',
    backgroundColor: "#F2F2F2"
  }
  const goBack = () => {
    uni.navigateBack()
  }
  const flag = computed(() => {
    return getApp().globalData.isIphoneX;
  })
  const volume = computed(() => {
    return getApp().globalData.volume;
  })
  const typeId = ref(0);
  onBeforeMount(() => {
    const pages = getCurrentPages();
    typeId.value = pages[pages.length - 1].options.type;
  })
 
  const volumeChange = (e) => {
    getApp().globalData.volume = e.detail.value;
  }
</script>

<style scoped lang="scss">
  .navbar {
    position: fixed;
    top: 60rpx;
    left: 30rpx;
    z-index: 100;
    font-size: 48rpx;
    font-weight: 500;
    color: #515151;

  }
.scroll-box{
  height: 100vh;
   background-color: #F2F2F2;
}
  .container {
    margin-top: 150rpx;
    height: 100vh;
    background-color: #F2F2F2;

    .item-box {
      background-color: red;
      box-sizing: border-box;
      padding: 35rpx 45rpx;
      height: 130rpx;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 45rpx;

      .right {
        .icon-jianzhuanquan- {

          font-size: 55rpx;
          color: #515151;
        }

        .icon-deng {
          font-size: 55rpx;
          color: #D81E06;
        }

        .name {
          margin-left: 30rpx;
          font-weight: 700;
        }

        .switch {
          height: 100rpx;
        }
      }

    }

    .slider-box {
      background-color: red;
      box-sizing: border-box;
      width: 100%;
      height: 130rpx;
      padding: 35rpx 45rpx;
      background-color: #fff;
      font-size: 45rpx;
    }
  }
</style>
